import React, {PureComponent} from "react";
import {connect} from 'react-redux';
import {Layout, Menu, Icon} from 'antd';
import {Link} from 'react-router-dom';
import {actionCreators} from "../store";

const {Sider} = Layout;
const SubMenu = Menu.SubMenu;

class SiderComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.isComponentWillUnMount = false;
        // this.state = {
        //     appName: ''
        // };
    }

    componentWillUnmount() {
        this.isComponentWillUnMount = true;
    }

    componentDidMount() {
        this.props.loadAppList();
        // this.props.connectionWS((img) => {
        //     if (!this.isComponentWillUnMount) {
        //         // this.forceUpdate();
        //         let appName = '';
        //         if (img !== undefined && img != null) {
        //             appName = img.split('/')[2];
        //             this.setState({appName})
        //         }
        //     }
        // });
        this.props.connectionExecCurrWS((info) => {
            if (!this.isComponentWillUnMount) {
                this.forceUpdate();
            }
        });
    }

    subMOnTitleClick = (item, key, keyPath, domEvent) => {
        this.props.updateSelectAppImg(item.key);
    };

    render() {
        const {collapsed, onCollapse, appList, currentAppInfo} = this.props;
        // const {appName} = this.state;
        return (<Sider style={{
            overflow: "auto", height: "100vh", position: "fixed", left: 0,
        }}
                       collapsible
                       collapsed={collapsed}
                       onCollapse={onCollapse}
        >
            <div className="logo"/>
            <Menu mode="inline"
                  theme="light"
                  defaultSelectedKeys={['1']}
                // defaultOpenKeys={['sub1', 'sub2', 'sub3']}
                  onClick={this.subMOnTitleClick}
            >
                <Menu.Item key="1">
                    <Link to='/index'>
                        <Icon type="global"/>
                        <span className="nav-text">首页</span>
                    </Link>
                </Menu.Item>
                <Menu.Item key="2">
                    <Link to='/reg_qrcode'>
                        <Icon type="qrcode"/>
                        <span className="nav-text">WIFI设备注册</span>
                    </Link>
                </Menu.Item>
                <SubMenu
                    key="sub1"
                    title={<span><Icon type="sync"
                                       spin={currentAppInfo.package != null}/><span>正在执行中</span></span>}
                >
                    {currentAppInfo.package != null && (<Menu.Item key={currentAppInfo.package}>
                        <Link to='/deviceList'>
                            <Icon type="sync"
                                  spin={currentAppInfo.package != null}/>
                            <span className="nav-text">{currentAppInfo.name}</span>
                        </Link>
                    </Menu.Item>)}
                </SubMenu>
                <SubMenu
                    key="sub2"
                    title={<span><Icon type="folder"/><span>图库列表</span></span>}
                >
                    {appList != null && appList.map((item, index) => {
                        return (<Menu.Item key={item.script}>
                            <Link to='/imgList'>
                                <Icon type="android"/>
                                <span className="nav-text">{item.name}</span>
                            </Link>
                        </Menu.Item>)
                    })}
                </SubMenu>
                <SubMenu
                    key="sub3"
                    title={<span><Icon type="code"/><span>日志</span></span>}
                >
                    <Menu.Item key="sub3-1">
                        <Link to='/runLog'>
                            <Icon type="bug"/>
                            <span className="nav-text">运行日志</span>
                        </Link>
                    </Menu.Item>
                </SubMenu>
                <SubMenu
                    key="sub4"
                    title={<span><Icon type="question-circle"/><span>关于</span></span>}
                >
                    <Menu.Item key="sub4-1">
                        <Link to='/about'>
                            <Icon type="info-circle"/>
                            <span className="nav-text">系统说明</span>
                        </Link>
                    </Menu.Item>
                    <Menu.Item key="sub4-2">
                        <Link to='/openAPI'>
                            <Icon type="deployment-unit"/>
                            <span className="nav-text">openAPI</span>
                        </Link>
                    </Menu.Item>
                </SubMenu>
            </Menu>
        </Sider>)
    }
}

const mapState = (state, ownProps) => ({
    appList: state.getIn(['home', 'appList']),
    selectAppImgItem: state.getIn(['home', 'selectAppImgItem']),
    currentAppInfo: state.getIn(['home', 'currentAppInfo']),
});

const mapDispatch = (dispatch) => ({
    loadAppList() {
        dispatch(actionCreators.loadAppList())
    },
    // connectionWS(func) {
    //     actionCreators.connectionWS(dispatch, func)
    // },
    connectionExecCurrWS(func) {
        actionCreators.connectionExecCurrWS(dispatch, func)
    },
    updateSelectAppImg(script) {
        dispatch(actionCreators.updateSelectAppImg(script))
    }
});

export default connect(mapState, mapDispatch)(SiderComponent);
